<template>
  <div class="flex-1 overflow-auto pr-1 h-0 flex flex-col">
    <template v-for="(group, index) in groupedList" :key="group">
      <a-card v-if="group.length" class="mt-2" :body-style="{ padding: '8px 12px' }" :class="{ 'flex-1': index === '辅助' }">
        <BaseTitle :title="index" />
        <div class="flex flex-wrap">
          <div v-for="list in group" :key="list.label" class="icon-item" :class="{ disabled: list.disabled }" @click="onClick(list)">
            <img :width="48" :height="48" :src="getImg(list.menuIcon)" alt="" />
            <span v-if="list.label && list.label.length >= 6" class="text-xs leading-6">{{ list.label }}</span>
            <span v-else>{{ list.label }}</span>
          </div>
        </div>
      </a-card>
    </template>
  </div>
</template>

<script setup>
import { onMounted, watch, ref } from 'vue'
import { message } from 'ant-design-vue'
import BaseTitle from '@/components/BaseTitle'
import useAppStore from '@/store/app'
import { post } from '@/utils/request'
import chooseOrg from './chooseOrg'

const getImg = (name) => new URL(`../../../assets/icons/${name}.png`, import.meta.url).href
const appStore = useAppStore()
const groupedList = ref([])
const onClick = async (item) => {
  appStore.LAST_MENU_ID = item.id
  appStore.ORG_CODE = getSystemConfig('ORGNIZATION_CODE')
  const orgList = appStore.ORG_LIST || []
  if (['视光配镜', '屈光发育', '角塑管理', '视力筛查', '眼科检查', '视光仓储'].includes(item.label)) {
    if (orgList.length > 1) {
      const res = await chooseOrg(orgList)
      appStore.ORG_CODE = res.organizationId
    } else if (orgList.length === 1) {
      appStore.ORG_CODE = orgList[0].organizationId
    } else if (orgList.length === 0) {
      return message.error('请先配置组织机构')
    }
  }
  if (item.path === 'JUMP-YSG') {
    // 跳转到眼科pass
    onClickJumpYSG()
    return
  }
  if (item.path === 'JUMP-CRM') {
    // 跳转到CRM
    onClickJumpCRM()
    return
  }
  if (item.path === 'JUMP-CSL') {
    // 跳转到角塑
    onClickJumpCSL()
    return
  }
  if (item.path === 'JUMP-XSSC') {
    // 跳转到角塑
    onClickJumpXSSC()
    return
  }
  if (item.path === 'JUMP-AET') {
    // 跳转到不良事件上报
    onClickJumpAET()
    return
  }
  if (item.path === 'JUMP-NI') {
    // 跳转到院感
    onClickJumpNI()
    return
  }
  appStore.CURRENT_ROUTE_NAME = item.label
  appStore.CURRENT_ROUTE_PATH = item.path
  await appStore.addRouter(true, item.isTargetBlank)
}
const groupedData = (list = []) => {
  const groups = {
    门诊: [],
    住院: [],
    战救: [],
    视光: [],
    辅助: []
  }
  list.forEach((item) => {
    groups[item.groupName]?.push(item)
  })
  return groups
}
watch(
  () => appStore.ROUTER_AUTHORITY,
  (val) => {
    groupedList.value = groupedData(val.filter((item) => item.type === '模块'))
  },
  {
    immediate: true
  }
)

onMounted(() => {
  appStore.CURRENT_ROUTE_NAME = '门户'
})
const onClickJumpCRM = async () => {
  const res = await post('/common/util/jumpCRMencrypt')
  if (res.code !== 0) return message.error(res.msg)
  openNewPage(res.data.url + '?token=' + res.data.token + '&setbh=' + res.data.setbh)
}
const onClickJumpYSG = async () => {
  const res = await post('/common/util/jumpYSGencrypt')
  if (res.code !== 0) return message.error(res.msg)
  openNewPage(res.data.url + '?token=' + res.data.token + '&setbh=' + appStore.ORG_CODE)
}
const onClickJumpCSL = async () => {
  const res = await post('/common/util/jumpCSLencrypt')
  if (res.code !== 0) return message.error(res.msg)
  openNewPage(res.data.url + '?token=' + res.data.token + '&setbh=' + res.data.setbh)
}
const onClickJumpXSSC = async () => {
  const res = await post('/common/util/jumpXSSCencrypt')
  if (res.code !== 0) return message.error(res.msg)
  openNewPage(res.data.url + '?token=' + res.data.token + '&setbh=' + res.data.setbh)
}
const onClickJumpAET = async () => {
  const res = await post('/common/util/jumpAETencrypt')
  if (res.code !== 0) return message.error(res.msg)
  openNewPage(res.data.url + '?token=' + res.data.token + '&setbh=' + res.data.setbh)
}
const onClickJumpNI = async () => {
  const res = await post('/common/util/jumpNIencrypt')
  if (res.code !== 0) return message.error(res.msg)
  openNewPage(res.data.url + '?token=' + res.data.token + '&setbh=' + res.data.setbh)
}
const openNewPage = (url) => {
  window.open(url, 'blank', `height=${screen.availHeight - 30},width=${screen.availWidth}, left=${0}`)
}
</script>
<style lang="less" scoped>
.icon-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 82px;
  margin-top: 8px;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  &:hover {
    background-color: var(--thin-color);
  }
  &.disabled {
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
  }
  img {
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnICB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogICAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNmMGYwZjAiICByeD0iMzIiLz4KPC9zdmc+Cg==);
    background-repeat: no-repeat;
    background-position: 40% 40%;
    background-size: 80%;
  }
}
</style>
